<template>
  <div>
    <el-form-item>
      <label>{{ $t("workFlow.Process.whetherEnable") }}</label>
      <el-radio-group v-model="formInfo.taskapi.isActvate">
        <el-radio :label="false">{{ $t("workFlow.Process.radioNo") }}</el-radio>
        <el-radio :label="true">{{ $t("workFlow.Process.radioYes") }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="formInfo.taskapi.isActvate">
      <div class="flex-box bt fw">
        <span class="flex-item opr el-icon-plus" @click="addApi"></span>
        <span class="flex-item">{{
          $t("workFlow.userButtonSetting.tableOperate")
        }}</span>
        <span class="flex-item">{{
          $t("workFlow.userButtonSetting.tableApiAddress")
        }}</span>
        <span class="flex-item">{{
          $t("workFlow.userButtonSetting.tableRequestWay")
        }}</span>
        <span class="flex-item"></span>
      </div>
      <div
        v-for="(item, index) in formInfo.taskapi.iframeData"
        :key="index"
        class="bt"
      >
        <div class="flex-box bt">
          <span class="flex-item opr" @click="delApi(index)">{{
            $t("tableOperationModule.deleteBtn")
          }}</span>
          <span class="flex-item opr" @click="addApiParams(index)">{{
            $t("workFlow.userButtonSetting.addParameterBtn")
          }}</span>
          <span class="flex-item">
            <el-input v-model="item.apiUrl"></el-input>
          </span>
          <span class="flex-item">
            <el-select v-model="item.method">
              <el-option label="post" value="post"></el-option>
              <el-option label="get" value="get"></el-option>
            </el-select>
          </span>
        </div>
        <div>
          <div v-if="item.params.length > 0">
            <div class="flex-box bt fw">
              <span class="flex-item"></span>
              <span class="flex-item"></span>
              <span class="flex-item">{{
                $t("workFlow.userButtonSetting.tablePName")
              }}</span>
              <span class="flex-item">{{
                $t("workFlow.userButtonSetting.tablePValue")
              }}</span>
              <span class="flex-item">{{
                $t("workFlow.userButtonSetting.tableOperate")
              }}</span>
            </div>
            <div
              class="flex-box bt"
              v-for="(sbuItem, subIndex) in item.params"
              :key="subIndex"
            >
              <span class="flex-item"></span>
              <span
                class="flex-item opr"
                @click="delApiParams(index, subIndex)"
                >{{ $t("tableOperationModule.deleteBtn") }}</span
              >
              <span class="flex-item"
                ><el-input v-model="sbuItem.name"></el-input
              ></span>
              <span class="flex-item">{{ sbuItem.params }}</span>
              <span
                class="flex-item opr"
                @click="openApiDialog(index, subIndex)"
                >{{ $t("workFlow.userButtonSetting.addPValueBtn") }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
      @closed="closeDialog"
    >
      <ApiRules
        v-if="dialogVisible"
        :ruleNameList.sync="apiParamsTemplateData"
        :ruleTreelist="apiRuleTreelist"
        :ruleBtnList="ruleBtnList"
        :ruleTip="apiRuleTip"
      ></ApiRules>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">{{
          $t("buttonModule.modalCancelBtn")
        }}</el-button>
        <el-button size="small" type="primary" @click="submitDialog">{{
          $t("buttonModule.modalSureBtn")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ApiRules from "./../ApiRulesConfig";
import { scriptApiTasksTree, scriptApiRuleTip } from "./../../../data/rules";
import { changeVariableSourceList } from "./../../../common/util/variable";
import { getProcessParametersData } from "./../../../common/util/properties";
export default {
  props: {
    formInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    ruleBtnList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {
    ApiRules
  },
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      editApiIndex: -1,
      editApiSubIndex: -1,
      apiRuleTreelist: [],
      apiRuleTip: scriptApiRuleTip,
      apiParamsTemplateData: []
    };
  },
  mounted() {
    let variableApilist = changeVariableSourceList({
      needButton: true,
      needButtonList: true
    });
    //增加流程参数
    let variableRulesList = getProcessParametersData();
    this.apiRuleTreelist = [...scriptApiTasksTree,...variableRulesList, ...variableApilist];
  },
  methods: {
    openApiDialog(index, subIndex) {
      this.dialogTitle = this.$t("workFlow.userButtonSetting.apiConfigTitle");
      this.dialogType = "Api";
      this.editApiIndex = index;
      this.editApiSubIndex = subIndex;
      this.apiParamsTemplateData = this.formInfo.taskapi.iframeData[
        index
      ].params[subIndex].templateData;
      this.dialogVisible = true;
    },
    addApi() {
      let defaultJson = {
        apiUrl: "",
        method: "post",
        params: []
      };
      this.formInfo.taskapi.iframeData.push(defaultJson);
    },
    delApi(index) {
      if (
        this.formInfo.taskapi.iframeData &&
        this.formInfo.taskapi.iframeData.length > 0
      ) {
        this.formInfo.taskapi.iframeData.splice(index, 1);
      }
    },
    addApiParams(index) {
      let defaultJson = {
        name: "",
        templateData: [],
        params: ""
      };
      this.formInfo.taskapi.iframeData[index].params.push(defaultJson);
    },
    delApiParams(index, subindex) {
      if (
        this.formInfo.taskapi.iframeData &&
        this.formInfo.taskapi.iframeData.length > 0 &&
        this.formInfo.taskapi.iframeData[index].params.length > 0
      ) {
        this.formInfo.taskapi.iframeData[index].params.splice(subindex, 1);
      }
    },
    submitDialog() {
      let index = this.editApiIndex;
      let subIndex = this.editApiSubIndex;
      this.formInfo.taskapi.iframeData[index].params[
        subIndex
      ].templateData = this.apiParamsTemplateData;
      this.formInfo.taskapi.iframeData[index].params[
        subIndex
      ].params = this.apiParamsTemplateData
        .map(element => {
          return element.name;
        })
        .join(".");
      this.$notify({
        title: this.$t("deletePrompt.promptTitle"),
        message: this.$t("workFlow.userButtonSetting.hintAddPValueSuccess"),
        type: "success"
      });
      this.closeDialog();
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  .flex-item {
    flex-basis: 18%;
    line-height: 40px;
    height: 40px;
    margin-left: 1%;
    margin-right: 1%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.bt {
  border-bottom: 1px solid #e4e4e4;
}
.fw {
  font-weight: 700;
}
.opr {
  color: #02a7f0;
  cursor: pointer;
}
</style>
